<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 之前实现图片回显 配合服务器
		1. 选择文件
		2. 获取文件信息对象 e.target.files[0]
		3. 使用FormData 收集 , 发送请求给服务器
		4. 服务收到请求后, 响应给客户端 一个图片地址  渲染返回的图片地址
	-->
	<!-- 选择完文件后,将图片展示在页面中 -->
	<input type="file">
	<img src="" alt="" width="100%">
	<script>
		const ipt = document.querySelector('input')
		const img = document.querySelector('img')
		ipt.addEventListener('change',(e)=>{
			console.log(e.target.files[0]);
			// 拿到文件信息对象后， 创建一个临时路径 URL.createObjectURL
			const url =	URL.createObjectURL(e.target.files[0])
			console.log(url);  // 这个url是一个临时路径 和 当前窗口绑定, 当前页面如果关闭了,这个路径也就失效了
			img.src = url
		})
	</script>
</body>
</html>